<template>
	<div class="flex-column" style="flex: 1;background: oldlace;">
		<TableHeader :showIndex="true"></TableHeader>
		<TableBody :data="body" :showIndex="true"></TableBody>
		<TableFooter></TableFooter>
	</div>
</template>

<script>
	import TableHeader from '@/components/table/TableHeader.vue';
	import TableBody from '@/components/table/TableBody.vue';
	import TableFooter from '@/components/table/TableFooter';
	var header = {
		name:{
			title:"姓名",
			width:'150px'
		},
		gender:{
			title:"性别"
		},
		age:{
			title:"年龄"
		},
		mobile:{
			title:"手机"
		}
	}

	var body = [{
		name: 'Chad',
		gender:'男',
		age:28,
		mobile:15001146184
	},{
		name: 'Chad',
		gender:'男',
		age:28,
		mobile:15001146184
	},{
		name: 'Chad',
		gender:'男',
		age:28,
		mobile:15001146184
	},{
		name: 'Chad',
		gender:'男',
		age:28,
		mobile:15001146184
	},{
		name: 'Chad',
		gender:'男',
		age:28,
		mobile:15001146184
	},{
		name: 'Chad',
		gender:'男',
		age:28,
		mobile:15001146184
	},{
		name: 'Chad',
		gender:'男',
		age:28,
		mobile:15001146184
	},{
		name: 'Chad',
		gender:'男',
		age:28,
		mobile:15001146184
	},{
		name: 'Chad',
		gender:'男',
		age:28,
		mobile:15001146184
	},{
		name: 'Chad',
		gender:'男',
		age:28,
		mobile:15001146184
	},{
		name: 'Chad',
		gender:'男',
		age:28,
		mobile:15001146184
	},{
		name: 'Chad',
		gender:'男',
		age:28,
		mobile:15001146184
	},{
		name: 'Chad',
		gender:'男',
		age:28,
		mobile:15001146184
	},{
		name: 'Chad',
		gender:'男',
		age:28,
		mobile:15001146184
	},{
		name: 'Chad',
		gender:'男',
		age:28,
		mobile:15001146184
	},{
		name: 'Chad',
		gender:'男',
		age:28,
		mobile:15001146184
	},{
		name: 'Chad',
		gender:'男',
		age:28,
		mobile:15001146184
	},{
		name: 'Chad',
		gender:'男',
		age:28,
		mobile:15001146184
	},{
		name: 'Chad',
		gender:'男',
		age:28,
		mobile:15001146184
	},{
		name: 'Chad',
		gender:'男',
		age:28,
		mobile:15001146184
	},{
		name: 'Chad',
		gender:'男',
		age:28,
		mobile:15001146184
	},{
		name: 'Chad',
		gender:'男',
		age:28,
		mobile:15001146184
	},{
		name: 'Chad',
		gender:'男',
		age:28,
		mobile:15001146184
	},{
		name: 'Chad',
		gender:'男',
		age:28,
		mobile:15001146184
	},{
		name: 'Chad',
		gender:'男',
		age:28,
		mobile:15001146184
	},{
		name: 'Chad',
		gender:'男',
		age:28,
		mobile:15001146184
	},{
		name: 'Chad',
		gender:'男',
		age:28,
		mobile:15001146184
	},{
		name: 'Chad',
		gender:'男',
		age:28,
		mobile:15001146184
	},{
		name: 'Chad',
		gender:'男',
		age:28,
		mobile:15001146184
	},{
		name: 'Chad',
		gender:'男',
		age:28,
		mobile:15001146184
	},{
		name: 'Chad',
		gender:'男',
		age:28,
		mobile:15001146184
	},{
		name: 'Chad',
		gender:'男',
		age:28,
		mobile:15001146184
	},{
		name: 'Chad',
		gender:'男',
		age:28,
		mobile:15001146184
	},{
		name: 'Chad',
		gender:'男',
		age:28,
		mobile:15001146184
	},{
		name: 'Chad',
		gender:'男',
		age:28,
		mobile:15001146184
	},{
		name: 'Chad',
		gender:'男',
		age:28,
		mobile:15001146184
	},{
		name: 'Chad',
		gender:'男',
		age:28,
		mobile:15001146184
	},{
		name: 'Chad',
		gender:'男',
		age:28,
		mobile:15001146184
	},{
		name: 'Chad',
		gender:'男',
		age:28,
		mobile:15001146184
	},{
		name: 'Chad',
		gender:'男',
		age:28,
		mobile:15001146184
	},{
		name: 'Chad',
		gender:'男',
		age:28,
		mobile:15001146184
	},{
		name: 'Chad',
		gender:'男',
		age:28,
		mobile:15001146184
	},{
		name: 'Chad',
		gender:'男',
		age:28,
		mobile:15001146184
	},{
		name: 'Chad',
		gender:'男',
		age:28,
		mobile:15001146184
	},{
		name: 'Chad',
		gender:'男',
		age:28,
		mobile:15001146184
	}]

	export default {
		data() {
			return {
				header: header,
				body:body
			}
		},
		components: {
			TableHeader,
			TableBody,
			TableFooter
		}
	}
</script>

<style>

</style>
